import React, {useEffect, useState} from "react";
import PropTypes from 'prop-types'
import PubSub from "pubsub-js";
import Upload from "./Upload";
import NewFile from "./NewFile";
import DownLoad from "./DownLoad";
import Share from "./Share";
import Move from "./Move";
import Copy from "./Copy";
import Remove from "./Remove";
import ButtonGroup from "../ButtonGroup";
import Search from "./Search";
import Layout from "./Layout";

import Context from "./context"

import './index.scss'

export default function ToolBar(props) {
    const [flag, setFlag] = useState(true)

    useEffect(() => {
        PubSub.subscribe('EV_SELECT', (_, data) => {
            setFlag(data.length <= 0)
        })
    }, [])

    useEffect(() => {
        if (props.selectList.length <= 0) setFlag(true)
    }, [props.selectList])

    return (
        <Context.Provider
            value={ {
                root: props.root,
                selectList: props.selectList
            } }
        >
            <div style={ props.style } className={'toolbar ' + props.className}>
                <Upload style={{marginRight: '10px'}} />
                <NewFile style={{marginRight: '10px'}} />
                <ButtonGroup>
                    <DownLoad />
                    {
                        flag
                            ? (<></>)
                            : (
                                <>
                                    <Share />
                                    <Move />
                                    <Copy />
                                    <Remove />
                                </>
                            )
                    }

                </ButtonGroup>
                <Search style={{marginLeft: 'auto'}} />
                <Layout style={{marginLeft: '10px'}} />
            </div>
        </Context.Provider>
    )
}

ToolBar.propTypes = {
    style: PropTypes.object,
    className: PropTypes.string,
    root: PropTypes.object,
    selectList: PropTypes.array
}

ToolBar.defaultProps = {
    style: {},
    className: '',
    root: {},
    selectList: []
}